<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>JavaScript vs. jQuery</title>
		<script type="text/javascript" src="scripts/jquery-1.7.2.js" ></script>
		<script>
			function answerJS()
			{
				var checkedValue;
				var answerField = document.getElementById( 'answer');
				var radioButtons = document.getElementsByTagName( 'input' );
				
				for( var i = 0; i < radioButtons.length; i++ )
				{
					if( radioButtons[ i ].type == 'radio' && radioButtons[ i ].name == 'difficulty' && radioButtons[ i ].checked )
					{
						checkedValue = radioButtons[ i ].value;
					}
					
					answerField.value = checkedValue;
				}
			}
			
			$(function()
			{
				jQuery('#answerjQuery').click( function() 
				{
					var checkedValue = $('[name="difficulty"]:radio:checked').val();
					
					$('input#answer').val(checkedValue);
				}
				);
			}
			);
			
		</script>
	</head>
	<body>
		
		From jQuery.com:<br><br>jQuery is a fast and concise JavaScript library Library that simplifies<br><br>
		<ul>
			<li>HTML document traversing</li>
			<li>event handling</li>
			<li>animating</li>
			<li>and Ajax interactions</li>
		</ul>
		
		<br/>
		for rapid web development.
		
		<h3>How difficult is jQuery?</h3>
		<br/>
		<form action="">
			<label>
				<input name="difficulty" value="very difficult" type="radio" id="difficulty_0">
				very difficult
			</label>
			<br/>
			<label>
				<input name="difficulty" value="medium difficult" type="radio" id="difficulty_1">
				medium difficult
			</label>
			<br/>
			<label>
				<input name="difficulty" value="not too difficult" type="radio" id="difficulty_2">
				medium difficult
			</label>
			<br/>
			<label>
				<input name="difficulty" value="easy" type="radio" id="difficulty_3">
				easy
			</label>
			<br/>
			<p>
				<input name="answer" type="text" id="answer">
			</p>
			<p>
				<input name="answerJavaScript" value="Answer with JavaScript"
					onclick="answerJS()" type="button" id="answerJavaScript">
				<input name="answerjQuery" value="Answer with jQuery" type="button" id="answerjQuery">
			</p>
		</form>
	</body>
</html>